<template>
	<div class="count-sales">
		<div class="card">
			<div class="card__header">
					<span class="label">
						在读学生
					</span>
				<span class="value">
						<el-icon><user-filled /></el-icon>
					{{Info.studying.studying}}
					</span>
				
			</div>
			<div class="card__header">
				<span class="label">停课学生</span>
				<span class="value"><el-icon size='15'><user /></el-icon> 
				{{Info.stopStudying.stopStudying}}

				</span>
			</div>
			<div class="card__footer">
				<span class="label">停学学生</span>
				<span class="value"><el-icon size='15'><user /></el-icon> 
				{{Info.leaveStudying.leaveStudying}}
				</span>
			</div>

			<!-- <div class="card__footer">
				<span class="label">在读学生</span>
				<span class="value"><el-icon size='15'><user-filled /></el-icon>1298.01</span>
			</div> -->
		</div>
	</div>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from "vue";
import {User,UserFilled} from "@element-plus/icons"

export default defineComponent({
	components:{
		UserFilled,
		User
	},
	props: {
		list: [String, Number, Array, Object]
	},
	setup(props, { emit }){
		const Info = ref('')
		// 解析值
		watch(
			() => props.list,
			(val: any) => {
				Info.value = val
			},
			{
				immediate: true
			}
		);
		console.log(Info.value)
		return {
			Info
		}
	}
});
</script>

<style lang="scss" scoped>
.count-sales {
	&__cop {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 50px;

		li {
			display: flex;
			list-style: none;
			flex: 1;
			color: #d8d8d8;

			.fall,
			.rise {
				display: flex;
				align-items: center;
				margin-left: 10px;
			}

			.fall {
				color: #13ae7c;
			}

			.rise {
				color: #f21e37;
			}
		}
	}
}
</style>
